import React from "react"
import useReactive from "../../hooks/useReactive.ts"

const TryUseReactive = () => {
  const form = useReactive({
    count: 1,
    name: "",
    arr: [1, 2, 3, 8, 5, 7, 9, 6],
  })

  return (
    <>
      <div>count的值：{form.count}</div>

      <button onClick={() => form.count++}>增加</button>

      <hr />

      <div>name的值：{form.name}</div>
      <input value={form.name} onChange={(e) => (form.name = e.target.value)} />
      <button onClick={() => (form.name = "Change Name")}>
        Change Form Name
      </button>
      <hr />
      <div>对数组进行操作</div>
      <div>{JSON.stringify(form.arr)}</div>
      <button onClick={() => form.arr.push(10)}>增加一个元素</button>
      <button onClick={() => form.arr.pop()}>删除一个元素</button>
      <button onClick={() => form.arr.sort()}>数组排序</button>
    </>
  )
}

export default TryUseReactive
